<template>
  <div
    class="web-resume-skills-chart"
    ref="web-resume-skills-chart">
    <el-dialog
      :title="popData.title"
      :visible.sync="popData.isShow"
      class="web-resume-skills-chart-pop"
      :append-to-body="true"
      width="600px">
      <p
        style="line-height: 20px; margin: 7px;"
        v-for="(v, k) in popData.dataArr"
        :key="k">{{ v }}</p>
    </el-dialog>
  </div>
</template>

<script>
  import EChares from 'echarts'
  /**
   * 个人简介界面绘制图表
   */
  export default {
    name: "WebResumeSkillsChart",
    data() {
      return {
        /**
         * 图表对象
         */
        chart: null,
        /**
         * 弹窗数据
         */
        popData: {
          isShow: false,
          dataArr: [],
          title: ''
        },
        /**
         * 获取的数据
         */
        chartData: null,
      }
    },
    mounted() {
      this.chart = EChares.init(this.$refs['web-resume-skills-chart']);
    },
    methods: {
      /**
       * 设置数据
       * @param {MeModel} data 个人数据
       */
      setDara(data) {
        this.chartData = data
        this.chart.setOption({
          color: ['#3398DB'],
          tooltip : {
            trigger: 'axis',
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
              type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            top: 10,
            left: 30,
            right: 0,
            bottom: 30,
            containLabel: true
          },
          xAxis: {
            type : 'category',
            data: [{
              value: '小程序',
              textStyle: {
                fontSize: 16
              }
            }, {
              value: 'WEB前端',
              textStyle: {
                fontSize: 16
              }
            }, {
              value: 'iOS',
              textStyle: {
                fontSize: 16
              }
            }, {
              value: 'Node.js',
              textStyle: {
                fontSize: 16
              }
            }, {
              value: 'Java',
              textStyle: {
                fontSize: 16
              }
            }],
            axisTick: {
              alignWithLabel: true
            }
          },
          yAxis: {},
          series: [{
            type:'bar',
            barWidth: '60%',
            data: [data.xcxNum, data.webNum, data.iosNum, data.nodeNum, data.javaNum],
            itemStyle: {
              normal: {
                color: new EChares.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#83bff6'},
                    {offset: 0.5, color: '#188df0'},
                    {offset: 1, color: '#188df0'}
                  ]
                )
              },
              emphasis: {
                color: new EChares.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#2378f7'},
                    {offset: 0.7, color: '#2378f7'},
                    {offset: 1, color: '#83bff6'}
                  ]
                )
              }
            },
          }]
        });
        this.chart.on('click', (params) => {
          switch (params.dataIndex) {
            case 0:
              this.popData.dataArr = this.chartData.xcxShow.split('\n')
              this.popData.title = '微信小程序'
              break
            case 1:
              this.popData.dataArr = this.chartData.webShow.split('\n')
              this.popData.title = 'WEB前端'
              break
            case 2:
              this.popData.dataArr = this.chartData.iosShow.split('\n')
              this.popData.title = 'iOS'
              break
            case 3:
              this.popData.dataArr = this.chartData.nodeShow.split('\n')
              this.popData.title = 'Node.js'
              break
            case 4:
              this.popData.dataArr = this.chartData.javaShow.split('\n')
              this.popData.title = 'Java'
              break
          }
          this.popData.isShow = true
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .web-resume-skills-chart {
    height: 400px;
  }
</style>

<style lang="scss">
  .web-resume-skills-chart-pop {
    .el-dialog__body {
      padding-top: 0px!important;
    }
  }
</style>
